<template>
  <div class="w-full">
    <div class="flex justify-center">
      <div class="w-10 h-10">
        <LogoTwitter />
      </div>
    </div>
    <div class="pt-5 space-y-6">
      <UIInput v-model="data.username" label="Username" placeholder="@username" />

      <UIInput label="Password" placeholder="******" type="password" v-model="data.password" />
      <UIButton @click="handleLogin" liquid :disabled="isButtonDisabled">
        登录
      </UIButton>
    </div>
  </div>
</template>
<script setup>
import useAuth from "~/composables/useAuth.js";

const data = reactive({
  username: 'admin',
  password: 'admin',
  loading: false
})
const handleLogin = async  ()=>{
  const {login} = useAuth()
  data.loading = true
  try {
    await  login({
      username:data.username,
      password:data.password
    })
  }catch (e) {
    console.log(e)
  }finally {
    data.loading = false
  }

}
const isButtonDisabled = computed(()=>{
  return (!data.name || !data.password) && data.loading
})
</script>